<template>
	<view class="profit-wrap page-bg">
		<scroll-view class="scroll-menu tt" scroll-x="true">
			<view v-for="(item, index) in menu" :key='item.id' style="width: 33.33%;" :class="currentMenuId===item.id?'menu-item menu-item-active':'menu-item'"
			 @click="serCurrentNavId(item.id, 'menu', index)">
				{{item.title}}
				<text class="after-line"></text>
			</view>
		</scroll-view>

		<swiper class="swiper-profit" :current='currentItemIndex' @change="swiperChange">
			<swiper-item>
				<view class="page-head">
					<image class="page-header__bg" src="../../static/common/icon_26.png" mode=""></image>
					<view class="profit-line">
						<view class="title">可提现余额(元)</view>
						<view class="record link" @click="link('/pages/mine/cashRecord?type=1')">提现记录</view>
					</view>
					<view class="profit-line">
						<view class="price" v-if="!info.account">0.0</view>
						<view class="price" v-else>{{info.account | formatMoney}}</view>
						<view class="btn full" @click="cash('/pages/mine/cash?balance='+info.account)">提现</view>
					</view>
					<view class="profit-line">
						<view class="tn-item">
							<view class="item">今日收入(元)</view>
							<view class="money">{{info.terdayProfit | formatMoney}}</view>
						</view>
						<view class="tn-item">
							<view class="item">昨日收入(元)</view>
							<view class="money">{{info.yesterdayProfit | formatMoney}}</view>
						</view>
						<view class="tn-item">
							<view class="item">累计收入(元)</view>
							<view class="money">{{info.cumProfit | formatMoney}}</view>
						</view>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="page-head">
					<image class="page-header__bg" src="../../static/common/icon_26.png" mode=""></image>
					<view class="profit-line">
						<view class="title">佣金(元)</view>
						<view class="record link" @click="link('/pages/mine/cashRecord?type=2')">提现记录</view>
					</view>
					<!-- <view class="profit-line">
						<view class="price">{{info.account | formatMoney}}</view>
						<view class="btn full" @click="cashTo(true)">提现到余额</view>
					</view> -->
					<view class="profit-line">
						<view class="price" v-if="!info.account">0.0</view>
						<view class="price" v-else>{{info.account | formatMoney}}</view>
						<view class="btn full" @click="cash('/pages/mine/cash?balance='+info.account)">提现</view>
					</view>
					<view class="profit-line">
						<view class="tn-item">
							<view class="item">今日收入(元)</view>
							<view class="money">{{info.terdayProfit | formatMoney}}</view>
						</view>
						<view class="tn-item">
							<view class="item">昨日收入(元)</view>
							<view class="money">{{info.yesterdayProfit | formatMoney}}</view>
						</view>
						<view class="tn-item">
							<view class="item">累计收入(元)</view>
							<view class="money">{{info.cumProfit | formatMoney}}</view>
						</view>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="page-head">
					<image class="page-header__bg" src="../../static/common/icon_26.png" mode=""></image>
					<view class="profit-line">
						<view class="title">红包(元)</view>
						<view class="record link" @click="link('/pages/mine/cashRecord?type=3')">提现记录</view>
					</view>
					<!-- <view class="profit-line">
						<view class="price">{{info.account | formatMoney}}</view>
					</view> -->
					<view class="profit-line">
						<view class="price" v-if="!info.account">0.0</view>
						<view class="price" v-else>{{info.account | formatMoney}}</view>
						<view class="btn full" @click="cash('/pages/mine/cash?balance='+info.account)">提现</view>
					</view>
					<view class="profit-line">
						<view class="tn-item">
							<view class="item">今日收入(元)</view>
							<view class="money">{{info.terdayProfit | formatMoney}}</view>
						</view>
						<view class="tn-item">
							<view class="item">昨日收入(元)</view>
							<view class="money">{{info.yesterdayProfit | formatMoney}}</view>
						</view>
						<view class="tn-item">
							<view class="item">累计收入(元)</view>
							<view class="money">{{info.cumProfit | formatMoney}}</view>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>


		<scroll-view v-if="currentMenuId===4" class="scroll-menu" scroll-x="true">
			<view v-for="item in navs" :key='item.id' :class="currentNavId===item.id?'menu-item menu-item-active':'menu-item'"
			 @click="serCurrentNavId(item.id,'nav')" style="width: 50%;">
				{{item.title}}
				<text class="after-line"></text>
			</view>
		</scroll-view>

		<view v-if="items.length <= 0" class="none-wrap">
			<none :img='icon_none' text='暂时还没有任何收益记录!'></none>
		</view>

		<view v-else class="mine-list">
			<view class="mine-item" v-for="item in items" :key='item.id'>
				<image v-if="currentNavId2 === 1" class="mine-item__avatar" :src="item.avatar | avatar" mode=""></image>
				<image v-if="currentNavId2 === 2" class="mine-item__avatar" src="../../static/common/icon_27.png" mode=""></image>
				<image v-if="currentNavId2 === 4" class="mine-item__avatar" :src="userInfo.avatar | avatar" mode=""></image>
				<image v-if="currentNavId2 === 5" class="mine-item__avatar" src="../../static/common/icon_28.png" mode=""></image>
				<view class="mine-item__info">
					<view class="mine-item__title">{{item.explain}}</view>
					<view class="mine-item__time">{{item.creationTime | formatTime}}</view>
				</view>
				<view class="mine-item__profit" v-if="item.commission > 0">+{{item.commission | formatMoney}}</view>
				<view class="mine-item__profit" v-else>{{item.commission | formatMoney}}</view>
			</view>
		</view>

		<view class="pop-wrap" :animation='animationData' @click.stop="cashTo(false)">
			<view class="pop-content" @click.stop="cashTo(true)">
				<view class="pop-title">
					<view class="pop-title__t">提现到余额</view>
					<image @click.stop="cashTo(false)" class="pop-title__close" src="../../static/common/close.png"></image>
				</view>
				<scroll-view class="pop-body" :scroll-y="true">
					<view :class="field==='amount'?'form-group form-group-active':'form-group'">
						<view class="form-group__title">输入提现金额</view>
						<view class="form-group__con">
							<input class="form-group__from" v-model="amount" @focus="setField('amount')" @blur="setField('other')" type="number"
							 placeholder="￥0.0" placeholder-class="placeholder" />
						</view>
					</view>
					<text class="tt"></text>
					<view v-if="amount<=0" class="desc">当前佣金收益{{info.account | formatMoney}}元, <text class="theme" @click='setAmount'>全部提现</text></view>
					<view v-else class="desc theme">额外扣除{{(amount * serviceCharge / 100).toFixed(2)}}元手续费(费率{{serviceCharge}}%)</view>
				</scroll-view>
				<view class="pop-center" @click="cashToFree(false)">立即提现到余额</view>
			</view>
		</view>

		<view class="footer-block"></view>
		<view v-if="currentMenuId===4"  class="page-submit" @click="link('/pages/mine/profitRecharge')">立即充值</view>
	
	</view>
</template>

<script>
	import icon_none from '../../static/common/icon_none_02.png'
	import none from '../../components/none.vue'
	import common from '../../utils/common.js'
	import { api } from '../../utils/api.js'
	export default {
		data() {
			return {
				icon_none,
				info: {}, // 用户收益信息
				navs: [{
						id: 4,
						title: '用户记录'
					},
					{
						id: 5,
						title: '佣金提现'
					}
				],
				menu: [{
						id: 4,
						title: '余额'
					},
					{
						id: 1,
						title: '佣金'
					},
					{
						id: 2,
						title: '红包'
					},
				],
				
				serviceCharge: 0, // 提现手续费
				amount: '', // 佣金提现金额
				
				items: [],
				currentNavId: 4, // 控制收益记录
				currentNavId2: 4, // 控制收益记录
				currentMenuId: 4, // 控制收益信息
				currentItemIndex: 0, // 控制swiper
				pageIndex: 1,
				pageSize: 10,
				totalCount: 0,

				field: '',
				userInfo: {},

				animationData: {},
				isShow: false
			}
		},
		onLoad() {
			this.userInfo = common.getUserInfo()
			this.getInfo()
			this.getItems()
		},
		methods: {
			swiperChange(e) {
				console.log(e);
			},
			
			getInfo() {
				api.userProfitAsync({
					commType: this.currentMenuId
				}, (res) => {
					this.info = res
					this.serviceCharge = res.serviceCharge || 0
				})
			},

			getItems() {
				let {
					pageIndex,
					pageSize
				} = this.$data
				api.incomeRecord({
					commType: this.currentNavId2,
					pageIndex,
					pageSize
				}, (res) => {
					this.totalCount = res.totalCount
					if (this.pageSize > res.totalCount) {
						this.text = '已经没有更多了~'
					}
					this.items = [...this.items, ...res.items]
				})
			},
			serCurrentNavId(id, field, index) {
				if (field === 'menu') {
					this.info = {}
					this.currentMenuId = id
					this.currentItemIndex = index
					this.getInfo()
				} else {
					this.currentNavId = id
				}
				this.currentNavId2 = id
				this.items = []
				this.pageIndex = 1
				this.getItems()
			},

			link(url) {
				this.$link(url)
			},
			// 提现到余额
			cashTo(status) {
				this.isShow = status
				this.setIsShow()
			},

			setIsShow() {
				let animation = uni.createAnimation({
					duration: '400',
					timingFunction: 'ease-out'
				})
				if (this.isShow) {
					this.animationData = animation.opacity(1).top(0).scale(1, 1).step().export()
				} else {
					this.animationData = animation.opacity(0).top('100%').scale(0, 0).step().export()
				}
			},

			setField(field) {
				this.field = field
			},
			
			// 设置佣金提现金额
			setAmount() {
				if(this.info.account <= 0) { this.$showToast('您还没有佣金可提现~'); return }
				this.amount = this.info.account
			},
			
			// 提现到余额执行按钮
			cashToFree() {
				if(this.info.account <= 0) { this.$showToast('您还没有佣金可提现~'); return }
				if(!this.amount) { this.$showToast('请输入要提现的佣金~'); return }
				if(this.amount <= 0) { this.$showToast('请输入要提现的金额~'); return }
				api.commissionToBalance({
					amount: this.amount
				}, (res) => {
					this.isShow = false
					this.$showToast('提现成功~')
				})
			},
			
			// 都不提现按钮
			cash(url) {
				// 提现规则，余额提现只能提20的倍数，佣金提现只能提100的倍数，需要付手续费，红包提现无要求
				let currentItemIndex = this.currentItemIndex
				let type = 1
				if(currentItemIndex===1) {
					// 佣金提现
					type = 2
					// if(this.info.account % 100 !== 0) {
					// 	this.$showToast('您的佣金收益不满足提现要求,佣金金额需是100的倍数才能提现哦~'); return
					// }
				}else if(currentItemIndex === 2) {
					// 佣金提现
					type = 3
					// if(this.info.account % 20 !== 0) {
					// 	this.$showToast('您的红包余额不满足提现要求,红包余额需是20的倍数才能提现哦~'); return
					// }
				}
				this.$link(`/pages/mine/cash?balance=${this.info.account}&serviceCharge=${this.info.serviceCharge}&type=${type}`)
			}
		},
		onReachBottom() {
			if (this.pageIndex * this.pageSize >= this.totalCount) {
				this.text = '已经没有更多了~'
			} else {
				this.pageIndex++
				this.getItems()
			}
		},
		components: {
			none
		}
	}
</script>

<style scoped lang="less">
	@import url('../../app.less');

	.form-group {
		margin-bottom: 10rpx;
		position: relative;
	}

	.profit-wrap {
		.content-20;
		display: flex;
		flex-direction: column;
	}

	.swiper-profit {
		width: 710rpx;
		height: 340rpx;
		margin-top: -30rpx;
	}

	.tt {
		margin-top: 50rpx;
	}

	.page-head {
		width: 100%;
		height: 340rpx;
		position: relative;

		.content-30;
		.f24;
		color: @f;
	}

	.page-header__bg {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
	}

	.profit-line {
		.flex-base;
		position: relative;

		.record::after {
			background: url('../../static/common/icon_01_white.png') no-repeat;
			background-size: cover;
		}

		.price {
			.fw;
			font-size: 60rpx;
			line-height: 60rpx;
			color: @f;
			padding-top: 20rpx;
			padding-bottom: 40rpx;
		}

		.full {
			background-color: @f;
			color: @font-orange-color;
			.fw;
			.f24;
			height: 60rpx;
			line-height: 60rpx;
		}

		.tn-item {
			text-align: center;
		}

		.money {
			.f28;
			.fw;
		}
	}

	.scroll-menu {
		background-color: @f;
		position: relative;
		top: -48rpx;
		.br;

		.menu-item {
			width: 33.33%;
		}
	}

	.none-wrap {
		position: relative;
		flex-grow: 2;
		.flex-base;
		justify-content: center;
		.none {
			position: unset;
		}
	}

	.mine-list {
		margin-top: -28rpx;
		.mine-item {
			background-color: @f;
			.br;
			.content-20;
			margin-bottom: 20rpx;
			.flex-base;
		}

		.mine-item__avatar {
			width: 100rpx;
			height: 100rpx;
			border-radius: 100%;
			flex-shrink: 0;
		}

		.mine-item__info {
			padding: 0 20rpx;
			box-sizing: border-box;
			flex-grow: 2;
			max-width: 420rpx;
		}

		.mine-item__title {
			.f30;
		}

		.mine-item__time {
			.f24;
			color: @font-dark-color;
			margin-top: 10rpx;
		}

		.mine-item__profit {
			.f32;
			color: @theme-color;
			width: 150rpx;
			.text-overflow;
			text-align: right;
			flex-shrink: 0;
		}
	}

	.pop-wrap {
		background: rgba(0, 0, 0, 0.4);
		position: fixed;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		top: 100%;
		z-index: 99;
		.flex-base;
		justify-content: center;
		transform: scale(0, 0);
	}

	.pop-content {
		background-color: @f;
		.br;
		width: 90%;
		max-height: 80%;
		padding: 20upx;
		box-sizing: border-box;
	}

	.pop-title {
		.flex-base;
		position: relative;

		.pop-title__t {
			flex-grow: 2;
			margin-right: 20upx;
			margin-bottom: 20upx;
			text-align: center;
			.f30;
		}

		.pop-title__close {
			width: 30upx;
			height: 30upx;
			border-radius: 100%;
			position: absolute;
			right: -10rpx;
			top: -8rpx;
		}
	}

	.pop-body {
		max-height: 600upx;
		text-align: justify;
		overflow: hidden;
	}

	.pop-center {
		height: 80upx;
		width: 100%;
		margin-top: 100upx;
		background: @font-orange-color;
		text-align: center;
		line-height: 80upx;
		color: @f;
		.br;
	}


	.form-group__title {
		.f26;
	}

	.form-group::after {
		content: '';
		display: block;
		left: 0;
		bottom: 0;
		border-bottom: 1px solid @font-orange-color;
		width: 0%;
		position: absolute;
		transition: all 0.3s linear;
	}

	.form-group-active::after {
		width: 100%;
	}
</style>
